<!-- 资产装置列表信息 -->
<template>
    <div class="q-pa-md bg-white" style="max-width:700px">
        <div class="cursor-pointer row ceshi">
            <span class="text-body1 q-pl-sm">资产信息</span>
            <q-space></q-space>
            <q-icon name="mdi-close" @click="closeDialog"></q-icon>
        </div>
        <q-table flat separator="none" :rows="dataList" :columns="columns" no-data-label="暂无数据"
            no-results-label="过滤器没有发现任何结果" row-key="name" :visible-columns="visibleColumns"
            v-model:pagination="pagination" hide-pagination :loading="loading" selection="multiple"
            v-model:selected="selected">
            <!-- 表格的加载状态 -->
            <template v-slot:loading>
                <q-inner-loading showing color="grey" />
            </template>
            <!-- 表格顶部 -->
            <template v-slot:top>
                <div style="width: 230px" class="q-mt-xs q-mr-sm">
                    <q-select dense options-dense outlined v-model="headerSeach" :options="deviceNameOptions" />
                </div>
                <div v-show="headerSeach" style="width: 200px" class="q-mr-sm q-mt-xs">
                    <q-input outlined v-model="queryList[seachContent[headerSeach]]" dense />
                </div>
                <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated icon="search" padding="8px 8px 7px"
                    color="primary" label="搜索" @click="handlerSearch" />
                <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated color="primary" padding="8px 8px 7px"
                    label="复位搜索" @click="handleResetSearch" />
                <q-space />
                <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="'表头选择'"
                    emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
                    class="q-mt-xs q-mr-sm" />
            </template>
            <!-- 无数据提示信息 -->
            <template v-slot:no-data="{ message }">
                <div class="full-width row flex-center text-accent q-gutter-sm">
                    <span>
                        {{ message }}
                    </span>
                </div>
            </template>
            <!-- 表格底部 -->
            <template v-slot:bottom>
                <div>已选中机器： {{ jqNameArr.join(",") }}</div>
            </template>
        </q-table>
        <!-- 分页 -->
        <Pagination :pagination="pagination" :pageSizes="['5条/页', '10条/页', '20条/页', '30条/页']" @updatePage="updatePage"
            @updateSizes="updateSizes" @handlerRefresh="handlerRefresh" />
        <q-btn class="q-mr-sm q-mt-xs float-right" outline padding="4px 15px 4px 15px"
            color="primary" label="确定" @click="submit" />
        <q-btn class="q-mr-sm q-mt-xs float-right" padding="4px 15px 4px 15px" label="取消" type="reset" style="color: #686868;" outline v-close-popup />
    </div>
</template>

<script>
import { ref } from 'vue'
import { getOranizerList } from 'src/api/asset'
import Pagination from 'src/components/pagination'
import getNowFormatDate from "src/utils/get-now-format-date"
import drag from 'src/components/mixins/drag.js'

export default {
  mixins: [drag],
    data() {
        return {
            dataList: [],
            columns: [
                { name: 'idNum', required: true, label: 'ID', align: 'center', field: 'idNum', isSort: true },
                { name: 'assets_sn', label: '资产编码', align: 'center', field: 'assets_sn', },
                { name: 'name', label: '名称', align: 'center', field: 'name', },
                { name: 'type_id', label: '类型', align: 'center', field: 'type_id', },
                { name: 'model', label: '型号', align: 'center', field: 'model', },
                { name: 'sn', label: '序列号', align: 'center', field: 'sn', },
                { name: 'vendor', label: '制造商', align: 'center', field: 'vendor', },
                { name: 'img', label: '图片', align: 'center', field: 'img', },
                { name: 'purchase_date', label: '入厂日期', align: 'center', field: 'purchase_date' },
                { name: 'create_time', label: '创建日期', align: 'center', field: 'create_time' },
                { name: 'manufacture_date', label: '出厂日期', align: 'center', field: 'manufacture_date', },
                { name: 'first_use_date', label: '首次启用日期', align: 'center', field: 'first_use_date' },
                { name: 'modify_time', label: '更新日期', align: 'center', field: 'modify_time', },
                { name: 'location', label: '安放位置', align: 'center', field: 'location', },
                { name: 'main_motor_power', label: '主电机功率', align: 'center', field: 'main_motor_power', },
                { name: 'production_speed_min', label: '最小生产速率', align: 'center', field: 'production_speed_min', },
                { name: 'production_speed_max', label: '最大生产速率', align: 'center', field: 'production_speed_max', },
            ],

            // 表格头部
            headerSeach: ref(),
            deviceNameOptions: ['', '资产编码', '名称', '类型', '型号', '序列号', '制造商', '安放位置', '主电机功率', '最小生产速率', '最大生产速率'],
            // 右侧表头选择
            visibleColumns: ref([]),
            pagination: { // 分页
                sortBy: 'desc', // 列名
                descending: false, // 是否按照降序排序
                page: 1, // 页码（当前显示第几页的数据）
                rowsPerPage: 5, // 每页多少行
                rowsNumber: 10 // 共多少条
            },
            queryList: {
                page: 1,
                page_size: 5,
                ordering: 'id'
            },
            loading: false,
            seachContent: {
                '资产编码': 'assets_sn',
                '名称': 'name',
                '类型': 'type_id',
                '型号': 'model',
                '序列号': 'sn',
                '制造商': 'vendor',
                '安放位置': 'location',
                '主电机功率': 'main_motor_power',
                '最小生产速率': 'production_speed_min',
                '最大生产速率': 'production_speed_max',
            },
            selected: ref([]),
            jqIdArr: [],
            jqNameArr: [],
        }
    },

    components: {
        Pagination
    },

    computed: {},
    watch: {
        selected: {
            handler(val) {
                this.jqIdArr = []
                this.jqNameArr = []
                if (val) {
                    val.map(item => {
                        this.jqIdArr.push(item.id)
                        this.jqNameArr.push(item.name)
                    })
                }
            }
        }
    },
    beforeCreate() {
    },
    mounted() {
        this.feathOranizerList()
        this.handleSelect()
    },

    methods: {
        submit(){
            this.$emit('selectedEvent', this.jqIdArr)
        },
        // 刷新
        handlerRefresh() {
            this.handleResetSearch()
        },
        /**
         * 搜索
         */
        handlerSearch() {
            this.pagination.page = 1
            this.feathOranizerList()
        },
        /**
         * 复位搜索
         */
        handleResetSearch() {
            this.pagination = {
                sortBy: 'desc',
                descending: false,
                page: 1,
                rowsPerPage: 5
            }
            this.queryList = {
                page: 1,
                page_size: 5,
                ordering: 'id'
            }
            this.headerSeach = ''
            this.feathOranizerList()
        },
        /**
         * 排序
         */
        handlerSort() {
            this.pagination.descending = !this.pagination.descending
            this.feathOranizerList()
        },
        /**
         * 获取资产信息的列表
         */
        feathOranizerList() {
            this.loading = true
            this.queryList.page = this.pagination.page
            this.queryList.page_size = this.pagination.rowsPerPage
            this.queryList.ordering = this.pagination.descending ? '-id' : 'id'
            getOranizerList(this.queryList).then(res => {
                if (res.status == 200) {
                    this.pagination.rowsNumber = res.totalCounts;
                    this.dataList = [];
                    this.loading = false;
                    for (let i = 0; i < res.data.length; i++) {
                        let obj = {
                            id: res.data[i].id,
                            idNum: i + 1,
                            name: res.data[i].name,
                            assets_sn: res.data[i].assets_sn,
                            electronic_code: res.data[i].electronic_code,
                            sn: res.data[i].sn,
                            model: res.data[i].model,
                            vendor: res.data[i].vendor,
                            location: res.data[i].location,
                            img: res.data[i].img,
                            manufacture_date: getNowFormatDate(new Date(res.data[i].manufacture_date)).substr(0, 16),
                            purchase_date: getNowFormatDate(new Date(res.data[i].purchase_date)).substr(0, 16),
                            first_use_date: getNowFormatDate(new Date(res.data[i].first_use_date)).substr(0, 16),
                            main_motor_power: res.data[i].main_motor_power,
                            production_speed_min: res.data[i].production_speed_min,
                            production_speed_max: res.data[i].production_speed_max,
                            type_id: res.data[i].type_name,
                            type_name: res.data[i].type_id,
                            owner_id: res.data[i].create_name,
                            create_time: getNowFormatDate(new Date(res.data[i].create_time)).substr(0, 16),
                            modify_time: getNowFormatDate(new Date(res.data[i].modify_time)).substr(0, 16),
                        }
                        this.dataList.push(obj)
                    }
                }
            }).catch(_ => {
                this.loading = false
            })
        },
        /**
         * 处理数据
         */
        handleSelect() {
            this.visibleColumns = []
            this.columns.forEach((item, index) => {
                if (index < 6) {
                    this.visibleColumns.push(item.name)
                }
            })
        },
        /**
        * 选择事件
        */
        selectedEvent(val) {
            if (val.length === 1) {
                this.$emit('selectedEvent', val)
                return
            }
            if (val && val.length > 1) {
                this.selected = val.slice(val.length - 1, val.length)
                this.$emit('selectedEvent', this.selected)
            }
        },
        /**
         * 关闭对话框
         */
        closeDialog() {
            this.$emit('closeDialog', false)
        },
        // 切换当前页数
        updatePage(val) {
            if (!val) return
            this.pagination.page = val * 1
            this.feathOranizerList()
        },
        // 切换每页的行数
        updateSizes(val) {
            this.pagination.rowsPerPage = parseFloat(val)
            this.feathOranizerList()
        }
    }
}

</script>
<style lang='scss' scoped>
</style>
